<template>
  <div>
    <h1>App</h1>
    <Home></Home>
    <Shop></Shop>
    <Cart></Cart>

    <!-- 动态组件 -->
    <button :class="{ active: cname === 'Home' }" @click="cname = 'Home'">Home</button>
    <button :class="{ active: cname === 'Shop' }" @click="cname = 'Shop'">Shop</button>
    <button :class="{ active: cname === 'Cart' }" @click="cname = 'Cart'">Cart</button>
    <component :is="cname"></component>
  </div>
</template>
<script>
import Home from './components/Home.vue'
import Cart from './components/Cart.vue'
import Shop from './components/Shop.vue'
export default {
  components: {
    Home, Cart, Shop
  },
  data() {
    return {
      cname: 'Home'
    }
  }
}
</script>

<style>
div {
  padding: 10px;
  margin: 10px;
  border: solid;
}

.active {
  background: blue;
  color: white;
}
</style>